<template>
  <div class="home-box">
    <header>
      <h3>潮服购</h3>
      <van-icon name="like" class="heart" />
      <van-search
        placeholder="年末折扣季"
        style="font-size: 20px"
        @search="evt(sVal)"
        @click-left-icon="evt(sVal)"
        v-model="sVal"
      />
      <van-icon name="photograph" class="camera" @click="cmaEvt()" />
    </header>
    <router-view name="header"></router-view>
    <main>
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../images/banner.png" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../images/banner2.png" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../images/banner3.png" />
          </van-swipe-item>
        </van-swipe>
        <div class="welfare">
          <span class="iconfont icon-diqiu">全场包邮</span>
          <span class="iconfont icon-a-jiaofeijilu1x">十亿补贴回馈用户</span>
          <span class="iconfont icon-kuaidi">三天无理由退换</span>
        </div>
      </div>
      <div class="hot">
        <div class="title">
          <h3>热门专区 | 本月 100+ 爆款</h3>
          <p>为您精挑细选的Dior、Louis Vuitton...</p>
        </div>
        <van-row>
          <div class="hotGoods"
           v-for="it in hotList" 
           :key="it.id"
           @click="detaEvt(it.id)">
            <img :src="it.img" />
            <h5>{{ it.brand }}</h5>
            <p>{{ it.title }}</p>
            <div>
              <span class="l">￥{{ it.oldPrice }}</span>
              <span class="m">￥{{ it.price }}</span>
              <span class="r">10亿补贴</span>
            </div>
          </div>
        </van-row>
        <div class="title-2">
          <h4>断码清仓</h4>
          <span class="iconfont icon-sanjiaoxing"></span>
          <img src="../../images/home-clear.png" style="width: 100vw" @click="router.push('/category')" />
        </div>
        <div class="sort">
          <h4>
            猜你喜欢
            <span class="iconfont icon-xingxing"></span>
          </h4>
          <van-row>
            <div class="hotGoods" v-for="it in listArr" :key="it.id"
            @click="detaEvt(it.id)">
              <img :src="it.img" />
              <h5>{{ it.brand }}</h5>
              <p>{{ it.title }}</p>
              <div>
                <span class="l">￥{{ it.oldPrice }}</span>
                <span class="m">￥{{ it.price }}</span>
                <span class="r">10亿补贴</span>
              </div>
            </div>
          </van-row>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getTypeApi, getByTypeApi, getProById } from "../../apis/homeApi";
import { useCommonStore } from "../../store";
import { showToast } from 'vant'
const router = useRouter();
/** 搜索 */
const sVal = ref("");
function evt(val: any) {
  sessionStorage.setItem("searchValue", val);
  router.push("/search");
  console.log(sVal);
}

/** 商品分类 */
const typeList = ref([]);
getStyle();
async function getStyle() {
  let _res = await getTypeApi();
  typeList.value = _res.data;
}

/** 商品列表 */
const listArr = ref([]);
const hotList = ref([]);
getStyleList("男装");
async function getStyleList(type: string) {
  let _res = await getByTypeApi(type);
    console.log(_res)
  listArr.value = _res.data;
  hotList.value = listArr.value.slice(10, 12);

}


/** 跳转详情页 */
async function detaEvt(id:string){
  let res = await getProById(id)
  sessionStorage.setItem('goodsId',res.data.id)
  router.push('/details')
}

/** 记住滚动条 */


/** 相机 */
function cmaEvt(){
  showToast('功能开发中')
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.home-box {
  .rel();
  header {
    width: 100vw;
    height: auto;
    padding-top: 20px;
    text-align: center;
    position: fixed;
    background-color: #fff;
    z-index: 999;
    h3 {
      letter-spacing: 1px;
    }
    .heart {
      position: fixed;
      right: 10px;
      top: 24px;
      font-size: 24px;
      float: right;
    }
    .van-search {
      margin-top: 10px;
      margin-bottom: 5px;
      --van-search-input-height: 50px;
      --van-search-content-background: #f6f6f6;
      --van-search-left-icon-color: @g4;
    }
    .camera {
      position: fixed;
      right: 28px;
      top: 80px;
      font-size: 30px;
    }
  }
  main {
    width: 100vw;
    flex: 1;
    background-color: #f0eff4;
    margin-top: 136px;
    .swipe {
      width: 100vw;
      height: auto;
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 400px;
        text-align: center;
        background-color: #39a9ed;
        img {
          width: 100vw;
          height: 300px;
        }
      }
    }
    .welfare {
      width: 100vw;
      height: 60px;
      background-color: #fff;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .iconfont {
        font-size: 12px;
        color: @c2;
      }
      .iconfont::before {
        margin-right: 2px;
      }
      .icon-diqiu::before {
        font-size: 22px;
        vertical-align: sub;
        color: black;
      }
      .icon-a-jiaofeijilu1x::before {
        font-size: 30px;
        vertical-align: middle;
        color: black;
      }
      .icon-kuaidi::before {
        font-size: 34px;
        vertical-align: middle;
        color: black;
      }
    }
    .hot {
      width: 100vw;
      height: auto;
      text-align: center;
      margin-top: 4px;
      .title {
        height: 140px;
        background-color: #fff;
        padding-top: 30px;
        margin-bottom: 4px;
        p {
          margin-top: 20px;
          color: black;
        }
      }
      .van-row {
        padding-top: 6px;
        display: flex;
        justify-content: space-around;
        .hotGoods {
          width: 180px;
          height: 310px;
          border-radius: 20px;
          background-color: #fff;
          img {
            width: 180px;
            height: 180px;
            border-radius: 20px 20px 0 0;
          }
          h5 {
            line-height: 46px;
          }
          p {
            font-size: 16px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom: 10px;
          }
          div {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            .l {
              color: darkgray;
              text-decoration: line-through;
            }
            .r {
              display: block;
              color: #fff;
              width: 56px;
              height: 18px;
              border-radius: 10px;
              background-color: red;
            }
          }
        }
      }
      .title-2 {
        .iconfont {
          font-size: 30px;
        }
        h4{
          margin-top: 20px;
        }
        img{
          margin-top: 10px;
        }
      }
      .sort {
        position: relative;
        margin-top: 20px;
        height: auto;
        h4 {
          text-align: center;
        }
        .iconfont {
          color: #f1eb29;
          font-size: 24px;
          vertical-align: super;
        }
        .hotGoods {
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
